<section [formGroup]="getTelemetryFromDatabaseConfigForm" fxLayout="column">
  <label translate class="tb-title no-padding">tb.rulenode.timeseries-key</label>
  <mat-form-field floatLabel="always" class="mat-block" style="padding-bottom: 16px;">
    <mat-label></mat-label>
    <mat-chip-list #latestTimeseriesChipList>
      <mat-chip
        *ngFor="let key of getTelemetryFromDatabaseConfigForm.get('latestTsKeyNames').value;"
        (removed)="removeKey(key, 'latestTsKeyNames')">
        {{key}}
        <mat-icon matChipRemove>close</mat-icon>
      </mat-chip>
      <input matInput type="text" placeholder="{{'tb.rulenode.timeseries-key' | translate}}"
             style="max-width: 200px;"
             [matChipInputFor]="latestTimeseriesChipList"
             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
             (matChipInputTokenEnd)="addKey($event, 'latestTsKeyNames')"
             [matChipInputAddOnBlur]="true">
    </mat-chip-list>
    <mat-hint [innerHTML]="'tb.rulenode.general-pattern-hint' | translate | safeHtml"></mat-hint>
  </mat-form-field>
  <mat-form-field class="mat-block" style="padding-bottom: 16px;">
    <mat-label translate>tb.rulenode.fetch-mode</mat-label>
    <mat-select formControlName="fetchMode" required>
      <mat-option *ngFor="let mode of fetchModes" [value]="mode">
        {{ mode }}
      </mat-option>
    </mat-select>
    <mat-hint translate>tb.rulenode.fetch-mode-hint</mat-hint>
  </mat-form-field>
  <div fxLayout="column" *ngIf="getTelemetryFromDatabaseConfigForm.get('fetchMode').value === fetchMode.ALL">
    <mat-form-field class="mat-block" style="padding-bottom: 16px;">
      <mat-label translate>tb.rulenode.order-by</mat-label>
      <mat-select formControlName="orderBy" required>
        <mat-option *ngFor="let order of samplingOrders" [value]="order">
          {{ order }}
        </mat-option>
      </mat-select>
      <mat-hint translate>tb.rulenode.order-by-hint</mat-hint>
    </mat-form-field>
    <mat-form-field class="mat-block" style="padding-bottom: 16px;">
      <mat-label translate>tb.rulenode.limit</mat-label>
      <input type="number" min="2" max="1000" step="1" matInput formControlName="limit" required>
      <mat-hint translate>tb.rulenode.limit-hint</mat-hint>
    </mat-form-field>
  </div>
  <mat-checkbox formControlName="useMetadataIntervalPatterns" style="padding-bottom: 8px;">
    {{ 'tb.rulenode.use-metadata-interval-patterns' | translate }}
  </mat-checkbox>
  <div class="tb-hint" style="padding-bottom: 16px;" translate>tb.rulenode.use-metadata-interval-patterns-hint</div>
  <div fxLayout="column" *ngIf="getTelemetryFromDatabaseConfigForm.get('useMetadataIntervalPatterns').value === false; else intervalPattern">
    <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>tb.rulenode.start-interval</mat-label>
        <input type="number" step="1" min="1" max="2147483647" matInput formControlName="startInterval" required>
        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('startInterval').hasError('required')">
          {{ 'tb.rulenode.start-interval-value-required' | translate }}
        </mat-error>
        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('startInterval').hasError('min')">
          {{ 'tb.rulenode.time-value-range' | translate }}
        </mat-error>
        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('startInterval').hasError('max')">
          {{ 'tb.rulenode.time-value-range' | translate }}
        </mat-error>
      </mat-form-field>
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>tb.rulenode.start-interval-time-unit</mat-label>
        <mat-select formControlName="startIntervalTimeUnit" required>
          <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
            {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>tb.rulenode.end-interval</mat-label>
        <input type="number" step="1" min="1" max="2147483647" matInput formControlName="endInterval" required>
        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('endInterval').hasError('required')">
          {{ 'tb.rulenode.end-interval-value-required' | translate }}
        </mat-error>
        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('endInterval').hasError('min')">
          {{ 'tb.rulenode.time-value-range' | translate }}
        </mat-error>
        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('endInterval').hasError('max')">
          {{ 'tb.rulenode.time-value-range' | translate }}
        </mat-error>
      </mat-form-field>
      <mat-form-field fxFlex class="mat-block">
        <mat-label translate>tb.rulenode.end-interval-time-unit</mat-label>
        <mat-select formControlName="endIntervalTimeUnit" required>
          <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
            {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </div>
  <ng-template #intervalPattern>
    <mat-form-field class="mat-block" style="padding-bottom: 16px;">
      <mat-label translate>tb.rulenode.start-interval-pattern</mat-label>
      <input matInput formControlName="startIntervalPattern" required>
      <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('startIntervalPattern').hasError('required')">
        {{ 'tb.rulenode.start-interval-pattern-required' | translate }}
      </mat-error>
      <mat-hint [innerHTML]="'tb.rulenode.general-pattern-hint' | translate | safeHtml"></mat-hint>
    </mat-form-field>
    <mat-form-field class="mat-block" style="padding-bottom: 16px;">
      <mat-label translate>tb.rulenode.end-interval-pattern</mat-label>
      <input matInput formControlName="endIntervalPattern" required>
      <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get('endIntervalPattern').hasError('required')">
        {{ 'tb.rulenode.end-interval-pattern-required' | translate }}
      </mat-error>
      <mat-hint [innerHTML]="'tb.rulenode.general-pattern-hint' | translate | safeHtml"></mat-hint>
    </mat-form-field>
  </ng-template>
</section>
